<template>
  <div :style="{background: bgColor}" class="ivu-shrinkable-menu">
    <slot name="top"></slot>
    <sidebar-menu
      v-show="!shrink"
      :menu-theme="theme"
      :menu-list="menuList"
      :open-names="openNames"
      @on-change="handleChange"
    ></sidebar-menu>
    <sidebar-menu-shrink
      v-show="shrink"
      :menu-theme="theme"
      :menu-list="menuList"
      :icon-color="shrinkIconColor"
      @on-change="handleChange"
    ></sidebar-menu-shrink>
  </div>
</template>

<script>
import sidebarMenu from './components/sidebarMenu.vue';
import sidebarMenuShrink from './components/sidebarMenuShrink.vue';
import util from '@/libs/util';
export default {
  name: 'shrinkableMenu',
  components: {
    sidebarMenu,
    sidebarMenuShrink
  },
  props: {
    shrink: {
      type: Boolean,
      default: false
    },
    menuList: {
      type: Array,
      required: true
    },
    dynamicMenuRoutes: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      default: 'dark',
      validator (val) {
        return util.oneOf(val, ['dark', 'light']);
      }
    },
    beforePush: {
      type: Function
    },
    openNames: {
      type: Array
    }
  },
  computed: {
    bgColor () {
      return this.theme === 'dark' ? '#495060' : '#fff';
    },
    shrinkIconColor () {
      return this.theme === 'dark' ? '#fff' : '#495060';
    }
  },
  methods: {
    handleChange (menuId) { // 菜单页面跳转
      let willpush = true;
      if (this.beforePush !== undefined) {
        if (!this.beforePush(menuId)) {
          willpush = false;
        }
      }
      if (willpush) {
        let route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menuId);// sys/user => sys-user
        if (route.length >= 1) {
          this.$router.push({
            name: route[0].name
          });
        } else {
          if (menuId === 'home') {
            this.$router.push({
              name: menuId
            });
          }
        }
      }
      this.$emit('on-change', menuId);
    }
  }
};
</script>

<style lang="less">
  .ivu-shrinkable-menu{
    height: 100%;
    width: 100%;
  }
</style>
